<template>
	<view class="app-container">
		<!-- logo -->
		<view class="logo-box">
			<image v-if="order.company === 2" src="/static/image/logo_tzl.png" mode="heightFix" class="logo"></image>
			<image v-if="order.company === 1" src="/static/image/logo_hmt.png" mode="heightFix" class="logo"></image>
		</view>
		<goods-desc :desc="goodsinfo.desc" :img="goodsinfo.detail_img" :name="goodsinfo.name"></goods-desc>
		
		<!-- 卡密信息 -->
		<card-info :city-type.sync="order.cityinfo.type" :mobile="order.mobile" :card="cardinfo.code_inner + '@' + cardinfo.pass_inner"></card-info>
		
		<!-- 提交按钮 -->
		<view class="flex mg-top-50">
			<my-button class="flex1 mg-right-20" title="返回"></my-button>
			<navigator class="flex1 mg-left-20" :url="'./order-appointment?sn=' + order.sn">
				<my-button title="立即预约" bg-color="#FF8B3E" color="#fff"></my-button>
			</navigator>
		</view>
	</view>
</template>

<script>
	import goodsDesc from './components/goods-desc.vue'
	import cardInfo from './components/card-info.vue'
	import order from '@/api/order.js'
	
	export default {
		components: { goodsDesc, cardInfo },
		data() {
			return {
				order: {
					sn: '',
					mobile: '',
					company: 0,
					cityinfo: {
						type: ''
					},
					cardinfo: {
						pass_inner: '',
						code_inner: ''
					},
					goodsinfo: {
						name: '',
						detail_img: ''
					}
				}
			};
		},
		computed:{
			cardinfo() { return this.order.cardinfo;},
			goodsinfo() { return this.order.goodsinfo;}
		},
		created() {
			this.order.sn = this.$route.query.sn
			this.getOrder()
		},
		methods:{
			getOrder() {
				order.detail(this.order.sn).then(res => {
					console.log(res.data);
					this.order = res.data
					this.order.goodsinfo.desc = '提供1寸冲印照8张或两寸4张；\n包含精修数码底片一张，不提供未修原图。'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.logo-box{
		// background:red;
		// height: 50rpx;
		// align-items: stretch;
	}
	.logo{
		height: 50rpx;
	}
	
	
	
	
	
</style>
